<template>
  <div class="news-detail-page">
    <PageHeader 
      title="企业动态" 
      :subtitle="news?.title || '新闻详情'"
      :breadcrumbItems="[
        { text: '首页', path: '/' },
        { text: '企业动态', path: '/news' }
      ]"
      :currentText="news?.title || '加载中...'"
    />
    
    <div class="page-container" v-loading="loading">
      <!-- 新闻详情 -->
      <div v-if="news" class="news-detail">
        <div class="news-header">
          <h1 class="news-title">{{ news.title }}</h1>
          <div class="news-meta">
            <span class="category">{{ getCategoryName(news.category) }}</span>
            <span class="date">{{ formatDate(news.editTime) }}</span>
            <span class="views">阅读：{{ news.viewCount || 0 }}</span>
          </div>
        </div>
        
        <div class="news-cover" v-if="news.cover">
          <img :src="news.cover" :alt="news.title">
        </div>
        
        <div class="news-content" v-html="news.content"></div>
      </div>
      
      <!-- 错误提示 -->
      <el-alert v-if="error" type="error" :title="error" :closable="false" show-icon></el-alert>
      
      <!-- 相关新闻 -->
      <div class="related-news" v-if="relatedNews.length > 0">
        <h2 class="section-title">相关新闻</h2>
        <div class="related-list">
          <div v-for="item in relatedNews" :key="item._id" class="related-item">
            <ArticleCard
              :id="item._id"
              :title="item.title"
              :summary="getSummary(item.content, 80)"
              :cover="item.cover"
              :date="item.editTime"
              :category="getCategoryName(item.category)"
              type="news"
            />
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { ref, onMounted, watch } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import { getNewsDetail, getHotNews, getNewsCategories } from '@/api/news';
import { useApi } from '@/utils/useApi';
import { formatDate, getSummary } from '@/utils/helper';
import PageHeader from '@/components/PageHeader.vue';
import ArticleCard from '@/components/ArticleCard.vue';

export default {
  name: 'NewsDetailView',
  components: {
    PageHeader,
    ArticleCard
  },
  setup() {
    const route = useRoute();
    const router = useRouter();
    const newsId = ref(route.params.id);
    const categories = ref([]);
    const relatedNews = ref([]);
    
    // 使用useApi钩子获取新闻详情
    const { 
      data: news, 
      error, 
      loading, 
      execute: fetchNewsDetail 
    } = useApi(getNewsDetail);
    
    // 获取新闻分类
    const fetchCategories = async () => {
      try {
        const res = await getNewsCategories();
        if (res.data && res.data.ActionType === 'ok') {
          categories.value = res.data.data;
        }
      } catch (error) {
        console.error('获取新闻分类失败:', error);
      }
    };
    
    // 获取相关新闻
    const fetchRelatedNews = async () => {
      try {
        const res = await getHotNews({ limit: 3 });
        if (res.data && res.data.ActionType === 'ok') {
          // 过滤掉当前文章
          relatedNews.value = res.data.data.filter(item => item._id !== newsId.value);
        }
      } catch (error) {
        console.error('获取相关新闻失败:', error);
      }
    };
    
    // 获取分类名称
    const getCategoryName = (categoryId) => {
      if (!categoryId) return '未分类';
      const category = categories.value.find(c => c.id === categoryId);
      return category ? category.name : '未分类';
    };
    
    // 加载数据
    const loadData = () => {
      fetchNewsDetail(newsId.value);
      fetchRelatedNews();
    };
    
    // 监听路由ID变化
    watch(() => route.params.id, (newId) => {
      if (newId && newId !== newsId.value) {
        newsId.value = newId;
        loadData();
      }
    });
    
    onMounted(() => {
      fetchCategories();
      loadData();
    });
    
    return {
      news,
      error,
      loading,
      relatedNews,
      formatDate,
      getSummary,
      getCategoryName
    };
  }
}
</script>

<style lang="scss" scoped>
.news-detail-page {
  .news-detail {
    margin-bottom: 50px;
    
    .news-header {
      margin-bottom: 30px;
      text-align: center;
      
      .news-title {
        font-size: 28px;
        font-weight: bold;
        margin-bottom: 15px;
      }
      
      .news-meta {
        display: flex;
        justify-content: center;
        color: #999;
        font-size: 14px;
        gap: 20px;
        
        .category {
          background-color: #f0f9ff;
          color: #409eff;
          padding: 2px 8px;
          border-radius: 2px;
        }
      }
    }
    
    .news-cover {
      margin-bottom: 30px;
      text-align: center;
      
      img {
        max-width: 100%;
        border-radius: 8px;
      }
    }
    
    .news-content {
      font-size: 16px;
      line-height: 1.8;
      color: #333;
      
      ::v-deep(img) {
        max-width: 100%;
        height: auto;
      }
      
      ::v-deep(p) {
        margin-bottom: 1em;
      }
      
      ::v-deep(h2) {
        margin: 1.5em 0 0.8em;
        font-size: 22px;
      }
      
      ::v-deep(h3) {
        margin: 1.2em 0 0.6em;
        font-size: 20px;
      }
    }
  }
  
  .related-news {
    margin-top: 50px;
    
    .section-title {
      font-size: 24px;
      font-weight: bold;
      margin-bottom: 20px;
      position: relative;
      padding-left: 15px;
      
      &::before {
        content: '';
        position: absolute;
        left: 0;
        top: 8px;
        height: 20px;
        width: 4px;
        background-color: #409eff;
      }
    }
    
    .related-list {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      gap: 30px;
      
      @media (max-width: 992px) {
        grid-template-columns: repeat(2, 1fr);
      }
      
      @media (max-width: 768px) {
        grid-template-columns: 1fr;
      }
    }
  }
}
</style>